<!-- 
  @name: 充值规则
  @date: 2020.3.11
 -->
<template>
	<view class="content">
		<!-- 输入区域 -->
		<view class="topview">
			<view class="title">充值规则设置</view>
			<view class="icon"></view>
			<view class="item t1 red">
				<view class="tip">面值</view><view class="input"><input type="digit" v-model.number="info.chargeOneVal" /></view>
				<view class="tip rg">赠送</view><view class="input"><input type="digit" v-model.number="info.sendOneVal" /></view>
				<view class="switch">
					<switch color="#407CFF" :checked="info.enableOne === 1" @change="change($event, 1)" />
				</view>
			</view>
			<view class="item">
				<view class="tip">面值</view><view class="input"><input type="digit" v-model.number="info.chargeTwoVal" /></view>
				<view class="tip rg">赠送</view><view class="input"><input type="digit" v-model.number="info.sendTwoVal" /></view>
				<view class="switch">
					<switch color="#407CFF" :checked="info.enableTwo === 1" @change="change($event, 2)" />
				</view>
			</view>
			<view class="item">
				<view class="tip">面值</view><view class="input"><input type="digit" v-model.number="info.chargeThreeVal" /></view>
				<view class="tip rg">赠送</view><view class="input"><input type="digit" v-model.number="info.sendThreeVal" /></view>
				<view class="switch">
					<switch color="#407CFF" :checked="info.enableThree === 1" @change="change($event, 3)" />
				</view>
			</view>
			<view class="item">
				<view class="tip">面值</view><view class="input"><input type="digit" v-model.number="info.chargeFourVal" /></view>
				<view class="tip rg">赠送</view><view class="input"><input type="digit" v-model.number="info.sendFourVal" /></view>
				<view class="switch">
					<switch color="#407CFF" :checked="info.enableFour === 1" @change="change($event, 4)" />
				</view>
			</view>
			<view class="item">
				<view class="tip">面值</view><view class="input"><input type="digit" v-model.number="info.chargeFiveVal" /></view>
				<view class="tip rg">赠送</view><view class="input"><input type="digit" v-model.number="info.sendFiveVal" /></view>
				<view class="switch">
					<switch color="#407CFF" :checked="info.enableFive === 1" @change="change($event, 5)" />
				</view>
			</view>
			<view class="item">
				<view class="tip">面值</view><view class="input"><input type="digit" v-model.number="info.chargeSixVal" /></view>
				<view class="tip rg">赠送</view><view class="input"><input type="digit" v-model.number="info.sendSixVal" /></view>
				<view class="switch">
					<switch color="#407CFF" :checked="info.enableSix === 1" @change="change($event, 6)" />
				</view>
			</view>
		</view>
		
		<!-- 按钮 -->
		<view class="btn_pub_blank"></view>
		<view class="btn_pub edit" @tap="preview">预览</view>
		<view class="btn_pub bottom" @tap="submit">确认</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					chargeOneVal: '',
					sendOneVal: '',
					enableOne: 1,
					chargeTwoVal: '',
					sendTwoVal: '',
					enableTwo: 1,
					chargeThreeVal: '',
					sendThreeVal: '',
					enableThree: 1,
					chargeFourVal: '',
					sendFourVal: '',
					enableFour: 1,
					chargeFiveVal: '',
					sendFiveVal: '',
					enableFive: 1,
					chargeSixVal: '',
					sendSixVal: '',
					enableSix: 1
				}
			}
		},
		onLoad() {
			this.getData();
		},
		onShow() {
			if(this.$store.state.reLogin) {
				this.getData();
				this.$store.commit('hasLogin');
			}
		},
		methods: {
			//更改状态
			change(e, code) {
				let stu = e.target.value ? 1 : 0;
				switch(code) {
					case 1: this.info.enableOne = stu; break;
					case 2: this.info.enableTwo = stu; break;
					case 3: this.info.enableThree = stu; break;
					case 4: this.info.enableFour = stu; break;
					case 5: this.info.enableFive = stu; break;
					case 6: this.info.enableSix = stu; break;
				}
			},
			//提交
			submit() {
				if(!this.info.chargeOneVal) this.info.chargeOneVal = 0;
				if(!this.info.sendOneVal) this.info.sendOneVal = 0;
				if(!this.info.chargeTwoVal) this.info.chargeTwoVal = 0;
				if(!this.info.sendTwoVal) this.info.sendTwoVal = 0;
				if(!this.info.chargeThreeVal) this.info.chargeThreeVal = 0;
				if(!this.info.sendThreeVal) this.info.sendThreeVal = 0;
				if(!this.info.chargeFourVal) this.info.chargeFourVal = 0;
				if(!this.info.sendFourVal) this.info.sendFourVal = 0;
				if(!this.info.chargeFiveVal) this.info.chargeFiveVal = 0;
				if(!this.info.sendFiveVal) this.info.sendFiveVal = 0;
				if(!this.info.chargeSixVal) this.info.chargeSixVal = 0;
				if(!this.info.sendSixVal) this.info.sendSixVal = 0;
				let str = JSON.stringify(this.info);
				this.$http({
					url: this.$api.exchargeUrl + 'editexchargerule',
					data: {
						chargeRule: str
					}
				}).then(res => {
					this.$successToast('设置成功！');
				});
			},
			//预览
			preview() {
				this.$store.commit('setTmpData', JSON.stringify(this.info));
				this.$navigateTo('./preview');
			},
			//获取充值规则
			getData() {
				this.$http({
					url: this.$api.exchargeUrl + 'exchargerulelist'
				}).then(res => {
					if(res){ this.info = res }
				});
			}
		}
	}
</script>

<style lang="scss">
	/* 输入区域 */
	.topview {
		width: 750rpx;
		padding-left: 30rpx;
		padding-right: 40rpx;
		padding-bottom: 123rpx;
		background-color: $color-white;
	}
	.title {
		width: 100%;
		margin-top: 40rpx;
		font-size: 32rpx;
	}
	.icon {
		width: 120rpx;
		height: 40rpx;
		margin-top: 40rpx;
		background-image: url('http://img.etubang.com/group1/M00/00/41/rBCky15omqOAaq0mAAATEW0yksY768.png');
	}
	.item.t1 {
		margin-top: 10rpx;
	}
	.item {
		width: 100%;
		margin-top: 53rpx;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		.tip {
			margin-bottom: 2rpx;
			color: $color-grey-dark;
		}
		.tip.rg {
			margin-left: 52rpx;
		}
		.input {
			width: 150rpx;
			margin-left: 13rpx;
			padding-bottom: 7rpx;
			text-align: center;
			color: #FCCD3F;
			font-size: 48rpx;
			font-family: $font-family-num;
			border-bottom: 2rpx solid $color-grey-light;
		}
		.switch {
			flex: 1;
			text-align: end;
		}
	}
	.item.red {
		.tip {
			color: #FF1E00;
		}
		.input {
			color: #FF1E00;
			border-bottom: 2rpx solid #FF1E00;
		}
	}
	
	/* 按钮 */
	.btn_pub.edit {
		color: $color-grey-dark;
	}
	
</style>
